

		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<title>Distance Calculator</title>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<style type="text/css">
			#map_canvas { 
				height: 80% ;width:60%;
			}
		</style>
		<script type="text/javascript">
		var directionDisplay;
		var directionsService = new google.maps.DirectionsService();
		var map;
		
		function initialize() {
			directionsDisplay = new google.maps.DirectionsRenderer();
			var tcc = new google.maps.LatLng(30.858054,75.861357);
			var myOptions = {
				zoom:7,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				center: tcc
			}

			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			directionsDisplay.setMap(map);
		}

		function calcRoute() {
			var start = document.getElementById("start").value;
			var end = document.getElementById("end").value;
			var distanceInput = document.getElementById("distance");
			var sandy = document.getElementById("sandy");
			var request = {
				origin:start, 
				destination:end,
				travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
			
			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
					distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
					 sandy.value = response.routes[0].legs[0].distance.value / 1000;
	
				}
		
			});
		}
		function alertdistance(){
			var distancevalue = document.getElementById("sandy").value;
			alert(distancevalue);
			}
		</script>
	

	<body onload="initialize()">
		 {% if form.errors %}
        <p style="color: red;">
            Please correct the error{{ form.errors|pluralize }} below.
        </p>
    {% endif %}

		
		
			<p>See the distance of site</p>
			
				<label for="start">Start: </label>
				<input type="text" name="start" id="start" value="gndec" readonly="true" />
				
				<label for="end">End: </label>
				<input type="text" name="end" id="end" />
				
				<input type ="button" value="Calculate Route" onclick="calcRoute()" />
			
				<label for="distance">Distance (km): </label>
				<input type="text" name="distance" id="distance"  />
			<div id="map_canvas"></div>
			
    
<form action="" method="post">{% csrf_token %}
	<label for="sandy">Distance (km): </label>
	<input  name="sandy" id ="sandy" />
	<input type ="submit" value="submit" >
</form>
		
	</body>
</html>

